<template>
  <div class="orderDetail-box">
    <div class="header">
      <h5>订单详细信息</h5>
      <i class="iconfont icon-close" @click="close"></i>
    </div>
    <div class="content">
      <div class="content-header">
        <p>
          订单状态：<span class="未完成"> {{ rowDataDetail.invoiceStatus }}</span>
        </p>
        <p>
          结款状态：<span class="已支付"> {{ rowDataDetail.paymentStatus }}</span>
        </p>
      </div>
      <div class="content-main">
        <div class="list-left">
          <p>单据编号：</p>
          <p>{{ rowDataDetail.orderId }}</p>
        </div>
        <div class="list-right">
          <p>终端门店：</p>
          <p>{{ rowDataDetail.customerStore }}</p>
        </div>
        <div class="list-left">
          <p>客户名称：</p>
          <p>{{ rowDataDetail.customerName }}</p>
        </div>
        <div class="list-right">
          <p>联系人：</p>
          <p>{{ rowDataDetail.contactPerson }}</p>
        </div>
        <div class="list-left">
          <p>销售总金额：</p>
          <p>{{ rowDataDetail.totalOrderAmount }}</p>
        </div>
        <div class="list-right">
          <p>预计总成本：</p>
          <p>
            {{
              Number(rowDataDetail.installationFeeTotal) +
              Number(rowDataDetail.urbanManagementFee) +
              Number(rowDataDetail.materialFeeTotal)
            }}
          </p>
        </div>
        <div class="list-left">
          <p>实际金额：</p>
          <p>{{ rowDataDetail.totalQuantity }}</p>
        </div>
        <div class="list-right">
          <p>实付金额：</p>
          <!-- <p>{{ rowDataDetail.actualPaymentPrice }}</p> -->
        </div>
        <div class="list-left">
          <p>交易日期：</p>
          <p></p>
        </div>
        <div class="list-right">
          <p>完工日期：</p>
          <!-- <p>{{ rowDataDetail.deliveryDate?.slice(0, 10) }}</p> -->
        </div>
        <div class="list-left">
          <p>制单人：</p>
          <p>{{ rowDataDetail.creator }}</p>
        </div>
        <div class="list-right">
          <p>开单时间：</p>
          <p>{{ rowDataDetail.orderDate?.slice(0, 10) }}</p>
        </div>
        <div class="list-left">
          <p>客户类型：</p>
          <p>{{ rowDataDetail.customerType }}</p>
        </div>
        <div class="list-right">
          <p>后期服务：</p>
          <p>{{ rowDataDetail.afterSalesService }}</p>
        </div>
        <div class="list-left">
          <p>成本合计：</p>
          <p>{{ rowDataDetail.totalCost }}</p>
        </div>
        <div class="list-right"></div>

        <div class="desc-list">
          <div class="desc-left">
            <p>备注：</p>
          </div>
          <div class="desc-right">
            <el-input v-model="rowDataDetail.remarks" type="textarea" disabled />
          </div>
        </div>
      </div>
      <div class="content-table">
        <div class="table-define">
          <el-table
            :data="rowDataDetail.productionVOS"
            style="width: 100%; overflow-y: scroll"
            max-height="900px"
            :header-cell-style="{ color: '#fff', background: `${bg} !important` }"
          >
            <el-table-column
              prop="businessType"
              label="业务类型"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="productionContent"
              label="制作内容"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
              v-if="deptId === 7901"
              show-overflow-tooltip
            />
            <el-table-column prop="width" label="高" align="center" show-overflow-tooltip />
            <el-table-column prop="height" label="宽" align="center" show-overflow-tooltip />
            <el-table-column
              prop="quantityPerPiece"
              label="件数"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="totalQuantity"
              label="数量"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="unit" label="单位" align="center" show-overflow-tooltip />
            <el-table-column
              prop="salePrice"
              label="销售单价"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="price" label="成本单价" align="center" show-overflow-tooltip />
            <!-- <el-table-column prop="price" label="单价" align="center" /> -->
            <el-table-column
              prop="materialFee"
              label="材料费"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="installationFee2"
              label="安装费(按天)"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="installationFee"
              label="安装费(固定)"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="urbanManagementFee"
              label="城管费"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="amount" label="金额" align="center" show-overflow-tooltip />
          </el-table>
        </div>
        <div class="table-outsourcing">
          <el-table
            :data="outsourcingTable"
            style="width: 100%; overflow-y: scroll"
            max-height="300px"
            :header-cell-style="{ color: '#fff', background: `${bg} !important` }"
          >
            <el-table-column
              prop="outsourcingId"
              label="外协单号"
              width="180"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="outsourcingName"
              label="外协商"
              width="180"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="costCategory"
              label="成本类型"
              align="center"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </div>
      <div class="content-bottom">
        <div class="bottom-left">
          <p>审批人：</p>
          <span>{{ rowDataDetail.approver || '暂无' }}</span>
        </div>
        <div class="bottom-right">
          <p @click="close">关闭</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, defineEmits, defineProps } from 'vue'
import { getInfo } from '@/api/login.js'
const emit = defineEmits(['closePopUps'])
// 表格颜色
let bg = '#1947FF'
// rowDataDetail
const props = defineProps({
  // 订单详情信息
  rowDataDetail: {
    type: Object,
    default: [],
    required: true,
  },
  widthMy: {
    type: String,
  },
})
let deptId = ref(null)
const getInfoFnApi = async () => {
  let res = await getInfo()
  deptId.value = res.user.deptId
}
// 订单详情表格信息
let tableData = ref([
  {
    businessType: 'KT展板',
    customerType: '鼬',
    productionContent: '展板',
    width: '1',
    height: '2',
    quantityPerPiece: '2',
    totalQuantity: '2',
    unit: '个',
    unitPrice: '52',
    materialFee: '23',
    installationFee: '22',
    installationFee2: '22',
    urbanManagementFee: '20',
    totalOrderAmount: '2000',
    afterSalesService: '上门',
  },
])
// 表格外协商
let outsourcingTable = ref([
  {
    outsourcingId: '00000000000',
    outsourcingName: '斯巴达',
    costCategory: '月结供应商',
  },
])
// 关闭当前框
const close = () => {
  emit('closePopUps', false)
}

onMounted(() => {
  outsourcingTable.value = props.rowDataDetail.productionVOS
  getInfoFnApi()
})
</script>
<style scoped lang="scss">
.orderDetail-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .未完成 {
    color: red;
  }

  .已支付 {
    color: green;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1947ff;
    border-radius: 4px 4px 0px 0px;
    padding: 0 30px;
    height: 40px;
    width: 100%;
    h5 {
      color: #fff;
      font-weight: 600;
    }

    .icon-close {
      border: 1px solid #666;
      color: #1947ff;
      background: #ffffff;
    }
  }

  .content {
    padding-top: 40px;
    color: #333333;

    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    .content-main {
      padding: 0 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .list-left,
      .list-right {
        display: flex;
        align-items: center;
        width: 33.33%;

        p {
          height: 40px;
          line-height: 40px;
        }
      }

      .desc-list {
        display: flex;
        align-items: center;
        width: 100%;
        .desc-right {
          margin: 5px 0;

          .el-textarea {
            width: 800px;
          }
        }
      }
    }

    .content-bottom {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;

      .bottom-left {
        margin-top: 10px;
        display: flex;

        p {
          color: #1947ff;
        }
      }

      .bottom-right {
        margin: 40px 0;

        p {
          width: 58px;
          height: 28px;
          background: linear-gradient(180deg, #d8e0ff 0%, #ffffff 100%);
          box-shadow: 2px 3px 6px 1px rgba(0, 0, 0, 0.16);
          border-radius: 2px 2px 2px 2px;
          text-align: center;
          line-height: 28px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
